<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

    </title>
    <style>
        body {
            font-family: 'Courier New', 'Courier New', Courier, monospace;
            font-size: 30px;
        }

        .container {
            width: max-content;
            margin: 0 auto;
            background-color: rgb(243, 255, 175);
            padding: 20px 100px;
        }
        .up-triangle {
            color: blue; /* 上三角颜色 */
        }

        .down-triangle {
            color: red; /* 下三角颜色 */
        }
    </style>
</head>

<body>
    <div class="container" id="starPattern">
    </div>
    <script>
        function drawStarPattern() {
    var pattern = "";
    var maxStars = 7; // 最大星号数量，对应正三角形的行数

    // 绘制上半部分的正三角形
    for (var i = 1; i <= maxStars; i++) {
        var line = "<span class='up-triangle'>";
        for (var j = 0; j < maxStars - i; j++) {
            line += "&nbsp;";
        }
        for (var k = 0; k < 2 * i - 1; k++) {
            line += "*";
        }
        pattern += line + "<br>";
    }

    // 绘制下半部分的倒三角形
    for (var i = maxStars - 1; i >= 1; i--) {
        var line = "<span class='down-triangle'>";
        for (var j = 0; j < maxStars - i; j++) {
            line += "&nbsp;";
        }
        for (var k = 0; k < 2 * i - 1; k++) {
            line += "*";
        }
        pattern += line + "<br>";
    }

    document.getElementById("starPattern").innerHTML = pattern;
}

// 调用函数来绘制星型图案
drawStarPattern();
        </script>



</body>